<template>
  <div class="projects-item-details" v-if="loading">
    <loader color="#fff" />
  </div>
  <div class="projects-item-details" v-else>
    <div class="header">
      <el-page-header icon="ArrowLeft" @back="handleBackClick">
        <template #content>
          <div class="flex items-center">
            <span class="text-large font-600 mr-3"> {{ project?.projectName }} </span>
            <el-tag v-for="(typeName, index) in projectTypes" :key="index">
              {{ typeName }}
            </el-tag>
            <span class="building" v-if="project?.projectState === 1">实施中</span>
            <span class="end" v-else-if="project?.projectState === 2">已完成</span>
            <span class="stop" v-else-if="project?.projectState === 10">已暂停</span>
          </div>
        </template>
      </el-page-header>
    </div>
    <div class="content">
      <el-tabs v-model="nowTab">
        <el-tab-pane label="基本信息" name="info">
          <projects-info :project="project" />
        </el-tab-pane>
        <el-tab-pane label="模块分解" name="decomposition">
          <functional-decomposition :project="project" @updateProject="fetchProjectDetail" />
        </el-tab-pane>
        <el-tab-pane label="任务列表" name="list">
          <tasks-list :project="project" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
import { codeToProjectState } from '@/mock/tasksquare'
import projectsInfo from '@/components/projects-info/projects-info.vue'
import functionalDecomposition from '@/components/functional-decomposition/functional-decomposition.vue'
import tasksList from '@/components/tasks-list/tasks-list.vue'
import { codeToProjectType } from '@/mock/tasksquare'
import { getProject } from '@/service/project/project'
import { useTaskStore } from '@/store/task/task'
import { ElMessage } from 'element-plus'
import Loader from '@/components/loader/loader.vue'
const store = useTaskStore()
const loading = ref(true)
const nowTab = ref('info')

const projectTypes = computed(() => {
  if (project.value && project.value.projectType) {
    return project.value.projectType.split('').map((code: string) => codeToProjectType[code])
  }
  return []
})

// 在组件内部
const route = useRoute()
const projectId = ref(route.params.no)
const project = ref<any>(null)
const fetchProjectDetail = async () => {
  loading.value = true
  try {
    const response = await getProject(projectId.value)
    project.value = response.data
    document.title = project.value.projectName + ' - 实力接单'
    store.taskMsg.projectsId = response.data.projectId
    loading.value = false
  } catch (error) {
    console.error('获取任务详情失败', error)
    ElMessage.error('网络异常，请刷新重试')
  }
}
onMounted(() => {
  fetchProjectDetail()
  nowTab.value = route.query.nowTab
})
// 返回按钮的点击事件
const router = useRouter()
function handleBackClick() {
  const projectState = codeToProjectState[project.value.projectState]
  router.push('/main/projects/' + projectState)
}
</script>

<style lang="less" scoped>
.projects-item-details {
  height: 80%;
  min-height: 360px;
  position: relative;
  background: #fff;
  border-radius: 8px;
  margin: 20px auto;
  .header {
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #eff2f7;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    span {
      margin-left: 10px;
    }
    .building {
      color: #009903;
      font-size: 20px;
      border-radius: 4px;
    }
    .end {
      color: #ff0000;
      font-size: 20px;
      border-radius: 4px;
    }
    .stop {
      color: #adac00;
      font-size: 20px;
      border-radius: 4px;
    }
  }
  .content {
    height: 94%;
    .el-tabs {
      height: 100%;
    }
  }
}
</style>
